<template>
  <div class="hello">
    <h3>{{ message }}</h3>
    <ul>
      <li v-for="(item,index) in names.list" :key="index">{{item}}</li>
    </ul>

    <button @click="clickHandle">按钮</button>
    <h3>{{msg}}</h3>
  </div>
</template>

<script>

import { ref,reactive,onMounted,inject } from 'vue'
export default {
  name: 'HelloWorld',
  props:{
    msg:String
  },
  //组合式api
  setup(props){
    console.log(props.msg)
    //ref
    const message = ref('数据')

    const names = reactive({
      list:['iwen','ime','frank']
    })

    function clickHandle(){
      console.log('点击')
    }

    onMounted(() => {
      console.log('生命周期函数:onmounted')
    })

    const msg = inject('message')

    return {
      message,
      names,
      clickHandle,
      msg,
    }
  }
}
</script>

